<template>
  <!-- textarea组件 -->
  <textarea
    class="input"
    v-model="inputValue"
    :placeholder="placeholder"
    :placeholder-style="placeholderStyle"
    :maxlength="maxlength"
    :disabled="disabled"
    :auto-height="autoHeight"
    :disable-default-padding="true"
    @input="handleInput"
    @blur="handleBlur"
  />
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { getClientPlatform } from '@/utils/clientEnv';

/** props-组件属性 */
const props = defineProps({
  // 值
  value: {
    type: String,
    default: ''
  },
  // 提示语
  placeholder: {
    type: String,
    default: '请输入'
  },
  // 提示语样式
  placeholderStyle: {
    type: String,
    default: ''
  },
  // 最大长度
  maxlength: {
    type: String,
    default: ''
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  }
});

/** emits-组件事件 */
const emits = defineEmits(['update:value', 'change', 'blur']);

let inputValue = ref('');

let autoHeight = ref(false);

let platform = getClientPlatform();

/** 生命周期 */
onMounted(() => {
  if (platform === 'ios') {
    console.log('platform=>', 'ios');
    autoHeight.value = true;
  } else {
    console.log('platform=>', 'android');
    // 安卓真机下，textarea高度会异常，官方人员解释：textarea在屏时，autoHeight属性才能计算高度，进行延迟赋值
    setTimeout(() => {
      autoHeight.value = true;
    }, 10);
  }
});

watch(
  () => props.value,
  (newVal) => {
    inputValue.value = newVal;
  },
  {
    immediate: true
  }
)

// 输入时触发
function handleInput(ev) {
  const { value } = ev.detail;
  emits('update:value', value);
  emits('change', value);
}

// 失去焦点时触发
function handleBlur() {
  emits('blur');
}

</script>

<style lang='scss' scoped>
.input {
  width: 100%;
  font-size: 26rpx;
  color: #333333;
  text-align: right;
  box-sizing: border-box;
}
</style>